<!-- 表格顶部右侧刷新、搜索显隐 -->
<template>
  <div class="operation">
    <el-button size="small" circle @click="refresh">
      <i class="el-icon-refresh" />
    </el-button>
    <el-button v-if="isOperation" size="small" circle @click="dialogVisible = true">
      <i class="el-icon-s-operation" />
    </el-button>
    <el-button size="small" circle @click="searchShowHidden">
      <i class="el-icon-search" />
    </el-button>
    <el-dialog title="多选" :visible.sync="dialogVisible" width="600px">
      <el-checkbox-group v-model="checkList" @change="val => $emit('checkboxChange', val)">
        <el-checkbox v-for="item in tableHead" :key="item.value" :label="item.label" />
      </el-checkbox-group>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    isOperation: {
      required: false,
      type: Boolean,
      default: false
    }, // 是否有显示操作方法
    tableHead: {
      required: false,
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      checkList: []
    }
  },
  watch: {
    tableHead: {
      deep: true,
      handler(val) {
        this.checkList = val.filter(item => !item.hidden).map(item => item.label)
      },
      immediate: true
    }
  },
  methods: {
    /**
         * 刷新列表
         */
    refresh() {
      this.$emit('refresh', '')
    },

    /**
         * 搜索栏显示隐藏
         */
    searchShowHidden() {
      this.$emit('searchShowHidden', '')
    }
  }
}
</script>

<style>
.operation.right{
  position: absolute;
  top: -60px;
  right: 0px;
}
.operation{
  margin-bottom: 10px;

}
</style>
